<% function buildUrl(route) { return `/api${route.path}`; } %>
<h2 class="page-title">路由管理</h2>
<form method="get" action="/routes" class="search-bar">
  <div class="search-bar-left">
    <input type="text" name="q" value="<%= q %>" placeholder="名称/路径搜索">
    <button type="submit">搜索</button>
  </div>
  <div class="search-bar-right">
    <a href="/routes/new" class="btn-main">新建路由</a>
  </div>
</form>
<div class="table-card">
<table>
  <thead>
    <tr>
      <th class="cell-ellipsis name-col">名称</th><th class="method-col">方法</th><th class="cell-ellipsis path-col">路径</th><th>延迟(ms)</th><th class="action-col">操作</th>
    </tr>
  </thead>
  <tbody>
  <% list.forEach(route => { %>
    <tr>
      <td class="cell-ellipsis name-col">
        <%= route.name %>
      </td>
      <td class="method-col"><span class="method-tag"><%= route.method %></span></td>
      <td class="cell-ellipsis path-col">
        <%= route.path %>
      </td>
      <td><%= route.delay %></td>
      <td class="action-col">
        <a href="/routes/edit/<%= route.id %>" class="btn-link">编辑</a>
        <form action="/routes/delete/<%= route.id %>" method="post" style="display:inline;" class="delete-form">
          <button type="button" class="btn-link btn-danger delete-btn">删除</button>
        </form>
        <button type="button" class="btn-link btn-copy" onclick="copyUrl('<%= buildUrl(route) %>')">复制</button>
      </td>
    </tr>
  <% }) %>
  </tbody>
</table>
</div>
<div class="pagination-bar">
  共<%= total %>条，当前第<%= page %>/<%= Math.ceil(total/pageSize) %>页
  <% for(let i=1;i<=Math.ceil(total/pageSize);i++){ %>
    <% if(i===page){ %><b class="current-page"><%= i %></b><% }else{ %><a href="?page=<%= i %>&pageSize=<%= pageSize %>&q=<%= q %>" class="page-link"><%= i %></a><% } %>
  <% } %>
</div>
<!-- 自定义删除确认弹窗 -->
<div id="delete-modal" style="display:none;position:fixed;left:0;top:0;width:100vw;height:100vh;background:rgba(0,0,0,0.18);z-index:9999;align-items:center;justify-content:center;">
  <div style="background:#fff;padding:32px 32px 24px 32px;border-radius:12px;box-shadow:0 4px 24px rgba(0,0,0,0.13);min-width:260px;text-align:center;">
    <div style="font-size:18px;color:#222;margin-bottom:24px;">确定要删除吗？</div>
    <button id="modal-confirm" style="background:#f44336;color:#fff;border:none;border-radius:6px;padding:8px 28px;font-size:16px;cursor:pointer;margin-right:18px;">删除</button>
    <button id="modal-cancel" style="background:#e3e8ee;color:#333;border:none;border-radius:6px;padding:8px 28px;font-size:16px;cursor:pointer;">取消</button>
  </div>
</div>
<script>
function copyUrl(url) {
  const full = location.origin + url;
  navigator.clipboard.writeText(full);
  showCopyTip();
}
// 右上角浮现"已复制"提示
function showCopyTip() {
  let tip = document.getElementById('copy-tip');
  if (!tip) {
    tip = document.createElement('div');
    tip.id = 'copy-tip';
    tip.style.position = 'fixed';
    tip.style.top = '32px';
    tip.style.right = '40px';
    tip.style.background = '#222';
    tip.style.color = '#fff';
    tip.style.padding = '10px 28px';
    tip.style.borderRadius = '8px';
    tip.style.fontSize = '16px';
    tip.style.zIndex = '9999';
    tip.style.boxShadow = '0 2px 8px rgba(0,0,0,0.18)';
    tip.style.opacity = '0';
    tip.style.transition = 'opacity 0.3s';
    tip.innerText = '已复制URL地址';
    document.body.appendChild(tip);
  }
  tip.style.opacity = '1';
  tip.style.display = 'block';
  clearTimeout(tip._timer);
  tip._timer = setTimeout(() => {
    tip.style.opacity = '0';
    setTimeout(()=>{tip.style.display='none';}, 300);
  }, 2000);
}
// 全局 tooltip 浮层
function createGlobalTooltip() {
  let tooltip = document.getElementById('global-cell-tooltip');
  if (!tooltip) {
    tooltip = document.createElement('div');
    tooltip.id = 'global-cell-tooltip';
    tooltip.style.position = 'fixed';
    tooltip.style.background = '#222';
    tooltip.style.color = '#fff';
    tooltip.style.padding = '6px 14px';
    tooltip.style.borderRadius = '6px';
    tooltip.style.fontSize = '14px';
    tooltip.style.whiteSpace = 'pre-line';
    tooltip.style.zIndex = '9999';
    tooltip.style.boxShadow = '0 2px 8px rgba(0,0,0,0.18)';
    tooltip.style.display = 'none';
    tooltip.style.pointerEvents = 'none';
    document.body.appendChild(tooltip);
  }
  return tooltip;
}
function handleTooltip() {
  const tooltip = createGlobalTooltip();
  document.querySelectorAll('.cell-ellipsis').forEach(cell => {
    cell.addEventListener('mouseenter', function(e) {
      if (cell.scrollWidth > cell.clientWidth) {
        tooltip.textContent = cell.innerText.trim();
        tooltip.style.display = 'block';
        const rect = cell.getBoundingClientRect();
        tooltip.style.left = rect.left + window.scrollX + 'px';
        tooltip.style.top = (rect.bottom + window.scrollY + 4) + 'px';
      } else {
        tooltip.style.display = 'none';
      }
    });
    cell.addEventListener('mousemove', function(e) {
      if (tooltip.style.display === 'block') {
        tooltip.style.left = e.clientX + 10 + 'px';
        tooltip.style.top = e.clientY + 10 + 'px';
      }
    });
    cell.addEventListener('mouseleave', function() {
      tooltip.style.display = 'none';
    });
  });
}
document.addEventListener('DOMContentLoaded', handleTooltip);
// 自定义删除弹窗逻辑
(function(){
  let currentForm = null;
  const modal = document.getElementById('delete-modal');
  const confirmBtn = document.getElementById('modal-confirm');
  const cancelBtn = document.getElementById('modal-cancel');
  document.querySelectorAll('.delete-btn').forEach(btn => {
    btn.addEventListener('click', function(e) {
      currentForm = btn.closest('form');
      modal.style.display = 'flex';
    });
  });
  confirmBtn.onclick = function() {
    if(currentForm) currentForm.submit();
    modal.style.display = 'none';
  };
  cancelBtn.onclick = function() {
    modal.style.display = 'none';
    currentForm = null;
  };
  // 点击遮罩关闭
  modal.addEventListener('click', function(e){
    if(e.target === modal) {
      modal.style.display = 'none';
      currentForm = null;
    }
  });
})();
</script> 